<template>
  <div class="container">
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="新增账号" name="first"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="登录账号" prop="admin_account">
          <el-input v-model="ruleForm.admin_account" placeholder="请输入登录账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="admin_password">
          <el-input
            type="password"
            v-model="ruleForm.admin_password"
            autocomplete="off"
            placeholder="设置密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="admin_confirm_password">
          <el-input
            type="password"
            v-model="ruleForm.admin_confirm_password"
            autocomplete="off"
            placeholder="确认设置密码"
          ></el-input>
        </el-form-item>
        <div class="myself-info">
          <el-form-item label="姓名" prop="admin_name">
            <el-input v-model="ruleForm.admin_name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="admin_phone">
            <el-input v-model="ruleForm.admin_phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </div>
        <div class="checkbox">
          <el-form-item label="编辑权限" prop="auth"></el-form-item>
          <!-- <Authority class="check-item" v-for="item of authorityList" :key="item.admin_id" :cityOptions="item.children" :title="item.module_name"></Authority> -->
          <Authority :authorityList="authorityList" @sendModule_id="handleModule_id"></Authority>
        </div>
      </el-form>
    </div>
    <div class="bottom">
      <el-button class="button" plain style="color: #000;" @click="cancle">取消</el-button>
      <el-button
        class="button"
        style="background-color: rgba(27, 166, 135, 1); color: #fff;"
        @click="comfirm"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
import Authority from "@/views/account/authority";
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => {}
    },
    authorityList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.admin_confirm_password !== "") {
          this.$refs.ruleForm.validateField("admin_confirm_password");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.admin_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    let validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码!'))
      } else if (!(/^1[3456789]\d{9}$/.test(value))) {
        callback(new Error('请输入有效手机号码'))
      }
    }
    return {
      activeName: "first",
      // ruleForm: {
      //   admin_account: "",
      //   admin_password: "",
      //   admin_confirm_password: "",
      //   admin_name: "",
      //   admin_phone: "",
      //   auth: ""
      // },
      rules: {
        admin_account: [
          { required: true, message: "请输入登录账号", trigger: "blur" }
        ],
        admin_password: [{ validator: validatePass, required: true, trigger: "blur" }],
        admin_confirm_password: [{ validator: validatePass2, required: true, trigger: "blur" }],
        admin_name: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        admin_phone: [{ validator:validatePhone, required: true, trigger: "blur" }],
        auth: [{ required: true }]
      }
    };
  },
  computed: {
  },
  methods: {
    handleModule_id(val) {
      this.$emit('sendModule_id', val)
    },
    cancle() {
      this.$router.push({ path: "/account/accountlist" });
    },
    comfirm() {
      this.$router.push({ path: "/account/accountlist" });
      this.$emit("updateAccount", this.ruleForm);
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  },
  components: {
    Authority
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  .content {
    .el-input {
      width: 457px;
      height: 32px;
    }
    .el-input /deep/ .el-input__inner {
      height: 32px !important;
    }
    .myself-info {
      display: flex;
      .el-input {
        width: 258px;
        height: 32px;
      }
    }
    .checkbox {
      display: flex;
      .check-item {
        padding-left: 0;
        height: 200px;
      }
    }
  }
  .button {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    padding: 0;
  }
}
.tab {
  .el-tabs /deep/ .el-tabs__nav-wrap::after {
    background: #fff !important;
  }
  .el-tabs /deep/ .el-tabs__item.is-active {
    color: #444 !important;
  }
}
</style>